<template>
  <view>
    <!-- 轮播图 -->
    <u-swiper
      :list="swiper"
      height="497rpx"
      indicator
      indicatorInactiveColor="#999"
      indicatorActiveColor="#eb4450"
      indicatorMode="dot"
      @click="showPreview"
    ></u-swiper>
    <!-- 信息 -->
    <view class="info">
      <view class="top">
        <view class="price">¥ {{ detail.goods_price }}</view>
        <view class="icons">
          <u-icon size="36rpx" color="#707070" name="share-square"></u-icon>
          <u-icon size="36rpx" color="#707070" name="star"></u-icon>
        </view>
      </view>
      <view class="title">{{ detail.goods_name }}</view>
    </view>
    <!-- 详情 -->
    <view class="detail-wrap">
      <view class="title">图文详情</view>
      <!-- <u-parse :content="detail.goods_introduce"></u-parse> -->
      <!-- uview2 的 u-parse 有渲染 bug -->
      <!-- <view v-html="detail.goods_introduce"></view> -->
      <rich-text :nodes="detail.goods_introduce"></rich-text>
    </view>
    <!-- 提交订单栏 -->
    <view class="submit-bar">
      <view class="contact">
        <u-icon size="35rpx" name="kefu-ermai"></u-icon>
        <view class="lable">联系客服</view>
      </view>
      <navigator url="/pages/cart/cart" open-type="switchTab" class="cart">
        <u-icon size="40rpx" name="shopping-cart"></u-icon>
        <view class="lable">购物车</view>
        <!-- 购物车数量有两种
        1. 多少种类商品 如 小米13 3台 苹果14 五台 加起来可以说 两个商品
        2. 多少个单独商品 如 小米13 3台 苹果14 五台 加起来可以说 共 8台手机 -->
        <!-- 在这里假设产品经理需要第一种, 购物车列表中多少的商品对象, 就显示多少, 不管每个商品卖多少个 -->
        <!-- 由于是 uniapp 不是原生 vue 底层是小程序的 setData, 没法在模板中直接获取 $store, 在js当中计算才行 -->
        <view class="number" v-if="totalType">{{ totalType }}</view>
      </navigator>
      <view class="btn add-cart" @click="addToCart">加入购物车</view>
      <view class="btn buy-now">立即购买</view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from "vuex";
  export default {
    data() {
      return {
        swiper: [],
        detail: {},
        // 模拟购物车变量
        // cart: [],
      };
    },
    computed: {
      // 如果觉得这样声明一个 totalType
      // 只是为了返回同名 getters 太烦人
      // 还有辅助函数可以帮你
      // totalType() {
      //   // this.$store.state 可以取出 vuex 里面的数据
      //   // 如果很多地方都要用到这个逻辑的话, 可以考虑封装成 vuex 里面的 getters 相当于共享的计算属性
      //   // return this.$store.state.cart.length;
      //   return this.$store.getters.totalType;
      // },
      ...mapGetters(["totalType"]),
    },
    onLoad(options) {
      // 小程序生命周期, 自带形参可以接收路径上的参数
      console.log(options);

      // 短路运算兼容测试场景, 缺少 goods_id 可以给一个默认值
      this.goods_id = options.goods_id || "43986";

      this.loadPage();
    },
    methods: {
      addToCart() {
        // 利用 vuex 添加商品
        this.$store.commit("addGoods", this.detail);

        // // 添加购物车之前, 检查购物车内是否已经存在这个商品, 如果存在, 将数量加一即可
        // const prod = this.cart.find(
        //   (item) => item.goods_id === this.detail.goods_id
        // );
        // if (prod) {
        //   prod.number++;
        //   return;
        // }
        // // 每次加入购物车, 除了将当前商品数据放入以外, 还得准备购物车相关数据, 如购买数量, 是否被选中等
        // // 方便购物车页面后续渲染
        // this.cart.push({
        //   ...this.detail,
        //   number: 1,
        //   isChecked: true,
        // });
      },
      async loadPage() {
        const res = await uni.$u.http.get("/goods/detail", {
          // 配置对象
          params: { goods_id: this.goods_id },
        });
        this.detail = res;
        // 手动处理轮播图
        this.swiper = res.pics.map((item) => item.pics_mid_url);
      },
      showPreview(index) {
        // 触发预览接口
        uni.previewImage({
          // 点击时组件库会传入索引下标Index
          // 把它设置为当前显示图片即可
          current: index,
          urls: this.swiper,
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  // 基本信息
  .info {
    padding: 19rpx 33rpx;
    .top {
      display: flex;
      justify-content: space-between;
      .price {
        font-size: 36rpx;
        color: #ea4350;
      }
      .icons {
        display: flex;
        width: 80rpx;
        justify-content: space-between;
      }
    }
    .title {
      margin-top: 19rpx;
      font-size: 30rpx;
      color: #434343;
    }
  }
  // 图文详情
  .detail-wrap {
    border-top: 19rpx solid #f9f9f9;
    padding-bottom: 100rpx;
    .title {
      text-align: center;
      color: #434343;
      padding: 19rpx 0;
      font-size: 28rpx;
    }
  }
  // 提交订单栏
  .submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #434343;
    font-size: 22rpx;
    height: 94rpx;
    border: 1rpx solid #dedede;
    .contact,
    .cart {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cart {
      position: relative;
      .number {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        background-color: red;
        color: #fff;
        font-size: 22rpx;
        width: 36rpx;
        line-height: 36rpx;
        text-align: center;
        border-radius: 50%;
      }
    }
    .btn {
      font-size: 26rpx;
      color: #fff;
      line-height: 60rpx;
      padding: 0 33rpx;
      border-radius: 30rpx;
    }
    .add-cart {
      background-color: #fcaa23;
    }
    .buy-now {
      background-color: #ea4350;
    }
  }
</style>